<template>
	<view class="template-music tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="false" :bottomShadow="true" backgroundColor="#FFFFFF">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<!-- 历史 -->
				<view class="custom-nav__back" @click="directToHistoryManager">
					<view class="logo-pic png-sussuspension1"
						style="background-image:url('https://tiantianyouhaojia.oss-cn-hangzhou.aliyuncs.com/my%20name%20is%20cece/flower.png')">
						<view class="logo-image ">
						</view>
					</view>
				</view>
				<!-- 搜索框 -->
				<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center " @click="searchManager">
					<view
						class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-color-gray--dark tn-bg-gray--light">
						<view class="custom-nav__search__icon tn-icon-search"></view>
						<view class="custom-nav__search__text tn-padding-right">搜搜看~</view>
					</view>
				</view>
			</view>
		</tn-nav-bar>

		<view class="tn-margin-left tn-margin-right tn-margin-top-lg"
			:style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<HomeBanner @actionEventManager="homeActionClickManager" />
		</view>

		<!-- 方式12 start-->
		<view class="tn-flex tn-margin-sm" style="display: flex;flex-wrap:wrap;justify-content: space-between;">
			<view v-for="item in ablumbList" :key="item.id">
				<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="directSubjectManager(item)">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view
							:class="[item.backgroundColor]"
							class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purplered--light tn-color-purplered">
							<van-image style="margin-top: 10rpx;" width="60rpx" height="60rpx" :src="item.image" />
						</view>
						<view class="tn-color-black tn-text-center">
							<text class="tn-text-ellipsis">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 方式12 end-->

		<!-- 图文 -->
		<!-- 比例 start-->
		<view class="tn-flex tn-flex-wrap tn-margin-sm">
			<block v-for="(item, index) in contentList" :key="index">
				<HomeItem style="width:50%" :transferItem="item" @actionEventManager="homeItemSelectedManager" />
			</block>
		</view>
		<!-- 比例 end-->

		<view class="tn-padding-xl"></view>

		<!-- 回到首页悬浮按钮-->
		<nav-index-button @actionEventManager="customerManager"></nav-index-button>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import NavIndexButton from '@/libs/nav-index-button.vue'
	import HomeItem from '@/components/QuestionItem/index.vue'
	import HomeBanner from '@/components/HomeBanner/index.vue'
	import {
		QuestionQuestion_List,
		SubjectSubjectList,
		SubjectSubSubjectList
	} from '@/api/home.js'
	import {
		memberHasLoginManager
	} from '@/api/login.js'



	export default {
		name: 'TemplateMusic',
		mixins: [template_page_mixin],
		components: {
			NavIndexButton,
			HomeItem,
			HomeBanner
		},
		onReady() {
			this.interfaceSubjectSubSubjectList();
			// 2.获取ablumn
			this.interfaceSubjectSubjectList();
		},
		data() {
			return {
				contentList: [],
				ablumbList: [],
			}
		},




		methods: {
			// 跳转到搜索
			searchManager() {
				uni.navigateTo({
					url: '/pages/search/index'
				})
			},

			// 跳转到历史
			directToHistoryManager() {
				// 表示登录了
				if (memberHasLoginManager() == true) {
					uni.navigateTo({
						url: '/pages/history/historyList'
					})
				} else {
					this.$emit('actionEventManager', 'login');
				}
			},

			// 联系客服
			customerManager() {
				uni.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc731ace59249100d1',
					},
					corpId: 'ww8e72805771067bcd',
					showMessageCard: false,
					 success(res) {
						 
					 },
					  fail(res) {
						  
						  console.log(JSON.stringify(res));
					  }
				})
			},

			homeActionClickManager(method, item, cname, realitem) {
			
			},

			// 跳转到详情
			directSubjectManager(item) {

				uni.navigateTo({
					url: '/pages/Subject/subjectList?name=' + item.name + '&id=' + item.id
				})
			},


			interfaceSubjectSubjectList() {
				var that = this;
				SubjectSubjectList().then(res => {
					
			
					that.ablumbList = res.list;
				});
			},

			interfaceSubjectSubSubjectList() {
				var that = this;
				var params = {}
				SubjectSubSubjectList(params).then(res => {
					that.contentList = res.list;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';

	.template-music {}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
				background-color: rgba(255, 255, 255, 0.2);
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {}
		}
	}

	/* 自定义导航栏内容 end */

	/* 图标容器12 start */
	.tn-three {
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);


				}
			}
		}
	}


	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	/* 底部标签栏动画 */
	.navbar__item .bar-text {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		position: relative;
		width: 50rpx;
		height: 50rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		background-color: currentColor;
		border-radius: 50%;
		transform: scale(0.8);
		opacity: 0;
		transition: all 0.55s cubic-bezier(0.71, 0.03, 0.23, 0.95);
	}

	.navbar__item.-blue {
		color: #06b8ff;
	}

	.navbar__item.-orange {
		color: #f2704d;
	}

	.navbar__item.-yellow {
		color: #f8cd4b;
	}

	.navbar__item.-purple {
		color: #8444d6;
	}

	.bar-text.-blue {
		color: #06b8ff;
	}

	.bar-text.-orange {
		color: #f2704d;
	}

	.bar-text.-yellow {
		color: #f8cd4b;
	}

	.bar-text.-purple {
		color: #8444d6;
	}

	.navbar__item:hover .bar-text {
		transform: translateY(-74rpx) scale(1.4);
		opacity: 1;
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),
			-1px -1px 5px rgba(255, 255, 255, 1);
	}

	.navbar__item:hover::before {
		opacity: 1;
	}

	.navbar__item:hover::after {
		opacity: 0.4;
	}

	.navbar__item:hover .navbar__icon {
		transform: translateY(-42rpx) scale(1);
		color: #fff;
		transition-delay: 0.1s, 0.1s;
	}

	.navbar__icon {
		bottom: -26rpx;
		transition: all 0.5s cubic-bezier(0.71, 0.03, 0.23, 0.95);
		transition-delay: 0.1s;
		display: inline-block;
		position: relative;
		z-index: 2;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				// color: #AAAAAA;
			}
		}
	}

	.logo-image {
		z-index: 9999 !important;
		width: 65rpx;
		height: 65rpx;
		position: relative;
	}

	.logo-pic {
		z-index: 9999 !important;
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
	}

	/* 自定义导航栏内容 end */

	/* 旋转 */
	.png-sussuspension1 {
		animation: suspension1 12s ease-in-out infinite;
	}

	@keyframes suspension1 {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.tabs-fixed {
		position: fixed;
		top: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		z-index: 1;
	}
</style>